<template>
  <div>
    <header>
      <h3 class="mt-0">企业信息</h3>
    </header>
    <div class="grid half gap-1">
      <el-card class="f-1">
        <template #header>
          <div class="row jcsb">
            <h4 class="m-0">基本信息</h4>
            <el-link
              class="fz-1"
              :underline="false"
              icon="Edit"
              @click="onUpdateEnterprise()"
            ></el-link>
          </div>
        </template>
        <div v-if="enterprise" class="body-grid">
          <div class="tar">企业名称:</div>
          <div class="tal">{{ enterprise?.name }}</div>
          <div class="tar">统一社会信用代码/注册号:</div>
          <div class="tal">{{ enterprise?.corporationNumber }}</div>
          <div class="tar">营业执照:</div>
          <div class="tal">{{ enterprise?.businessLicense }}</div>
        </div>
        <div v-else>您还未添加企业信息</div>
      </el-card>
      <el-card class="">
        <template #header>
          <div class="row jcsb">
            <h4 class="m-0">套餐：免费版</h4>
            <el-link class="fz-1" :underline="false" icon="Edit"></el-link>
          </div>
        </template>
      </el-card>
      <el-card class="">
        <template #header>
          <div class="row jcsb">
            <h4 class="m-0">开票信息</h4>
            <el-link class="fz-1" :underline="false" icon="Edit"></el-link>
          </div>
        </template>
        <div>您还未添加开票信息</div>
      </el-card>
      <el-card class="">
        <template #header>
          <div class="row jcsb">
            <h4 class="m-0">邮寄信息</h4>
            <el-link class="fz-1" :underline="false" icon="Edit"></el-link>
          </div>
        </template>
        <div v-if="address"></div>
        <div v-else>您还未添加邮寄信息</div>
      </el-card>
    </div>
    <el-dialog
      v-model="updateEnterpriseDialogVisible"
      :title="dialogTitle"
      width="38%"
    >
      <el-form
        ref="updateEnterpriseFormRef"
        label-width="4rem"
        label-position="top"
        :model="updateEnterpriseForm"
        class="mt-1"
        :rules="rules"
      >
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="updateEnterpriseForm.name"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人" prop="legalRepresentative">
          <el-input
            v-model="updateEnterpriseForm.legalRepresentative"
          ></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码/注册号" prop="corporationNumber">
          <el-input v-model="updateEnterpriseForm.corporationNumber">
          </el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          <el-input v-model="updateEnterpriseForm.businessLicense"> </el-input>
        </el-form-item>
        <div style="text-align: right">
          <el-button type="primary" @click="updateEnterpriseSubmite()"
            >提交</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// import { shios } from '@/api/Shios';
import router from '@/route';
import { store } from '@/store';
import { reactive } from 'vue';
import { ref } from 'vue';
import { rules } from '@/libs/Rules';
import { FormInstance } from 'element-plus';
const user = store.user.state;

const enterprise = store.user.state.enterprise;
const address = store.user.state.address;
const updateEnterpriseDialogVisible = ref(false);
const updateEnterpriseForm: Enterprise = reactive({
  name: '',
  legalRepresentative: '',
  corporationNumber: '',
  businessLicense: '',
});
const updateEnterpriseFormRef = ref<FormInstance>();
const dialogTitle = ref('添加企业信息');
function onUpdateEnterprise() {
  updateEnterpriseDialogVisible.value = true;
}
function updateEnterpriseSubmite() {}
</script>

<style lang="scss" scoped>
.body-grid {
  display: grid;
  grid-template-columns: 38% 62%;
  // grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
</style>
